import React from 'react';

import {
    View,
    Text,
    Dimensions,
    TouchableHighlight
} from 'react-native';

const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource');
import { RobotMapView } from 'miot/ui'

const { width } = Dimensions.get('window');

export default class RobotMapDemo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            mapImages: [{
                source: require('../../Resources/robot/charge.png'),
                position: { x: 125, y: 125 }, size: { w: 29, h: 39 },
                rotation: 0,
                name: 'charge'
            }, {
                source: require('../../Resources/robot/robot.png'),
                position: { x: 140, y: 140 },
                size: { w: 29, h: 29 },
                name: 'robot'
            }]
        }
    }

    componentDidMount() {
        setTimeout(() => {
            let pointsStr = "128 128 3 128 129 3 128 129 1 127 128 1 127 129 1 128 128 1 129 128 1 128 129 1 128 127 1 129 128 3 129 127 1 130 128 1 130 127 1 131 128 1 131 128 3 131 127 1 132 128 1 132 127 1 133 128 1 133 128 3 133 127 1 134 128 1 134 127 1 135 128 1 135 128 3 135 127 1 136 128 1 136 127 1 137 128 1 137 128 3 137 127 1 138 128 1 138 127 1 139 128 1 139 128 3 139 127 1 140 128 1 140 127 1 141 128 1 141 128 3 141 127 1 142 128 1 142 127 1 143 128 1 143 128 3 143 127 1 144 128 1 144 127 1 145 128 1 145 128 3 145 127 1 146 128 1 146 127 1 147 128 1 147 128 3 147 127 1 148 128 1 148 127 1 149 128 1 149 128 3 149 127 1 150 128 1 150 127 1 151 128 1 151 128 3 151 127 1 152 128 2 152 127 2 151 127 3 151 126 1 150 127 3 150 126 1 149 126 1 148 127 3 146 127 3 144 127 3 142 127 3 140 127 3 138 127 3 136 127 3 134 127 3 130 127 3 130 126 2 129 126 2 131 126 2 132 126 2 132 125 2 132 126 2 132 127 3 133 126 2 133 125 2 133 126 2 134 126 2 134 127 3 135 126 1 135 126 2 134 125 2 134 126 2 135 127 3 136 126 1 136 127 3 137 126 1 137 126 3 138 126 1 139 126 1 139 126 3 140 126 1 141 126 1 141 126 3 142 126 1 143 126 1 143 126 3 144 126 1 145 126 1 145 126 3 146 126 1 147 126 1 147 126 3 148 126 1 148 125 2 149 125 2 147 124 2 147 125 2 147 125 3 146 124 2 146 125 2 146 125 3 146 125 1 145 124 2 146 125 2 145 125 2 146 124 2 145 124 2 146 124 2 145 124 2 146 124 2 145 124 2 146 124 2 145 124 2 145 125 3 145 125 1 144 125 1 143 125 1 143 124 2 142 124 2 143 125 3 142 125 1 142 125 3 141 124 2 142 125 2 141 125 2 141 124 2 141 125 2 141 125 3 141 125 1 140 125 1 139 125 1 139 125 3 138 125 1 138 124 2 139 124 2 138 125 3 137 125 1 137 125 2 138 125 2 137 124 2 138 125 1 137 125 2 137 124 2 137 125 3 137 125 1 137 125 2 136 124 2 136 125 2 136 124 2 136 125 2 136 125 3 136 125 1 135 125 1 135 124 2 134 124 2 136 125 3 136 126 3 137 128 3 137 129 1 136 129 1 136 128 3 134 128 3 132 128 3 130 128 3 128 128 3 127 128 1 127 128 3 127 127 1 126 128 2 126 127 2 126 129 2 127 129 2 128 129 3 129 129 1 129 129 3 130 129 1 131 129 1 131 128 3 132 129 1 133 129 1 133 128 3 134 129 1 135 129 1 135 128 3 137 128 3 138 129 1 139 129 1 139 128 3 140 129 1 141 128 3 141 129 1 142 129 1 143 128 3 143 129 1 144 129 1 145 129 1 146 129 1 147 128 3 147 129 1 148 129 1 149 128 3 149 129 1 150 129 1 151 128 2 151 129 2 150 130 1 151 130 1 149 129 3 149 130 1 148 130 1 147 129 3 147 130 1 146 130 1 145 129 3 145 130 1 144 130 1 143 129 3 143 130 1 142 130 1 141 129 3 141 130 1 140 130 1 139 129 3 139 130 1 138 130 1 137 129 3 137 130 1 136 130 1 135 129 3 135 130 1 134 130 1 133 129 3 133 130 1 132 130 1 131 129 3 131 130 1 130 130 1 129 129 3 129 130 1 128 130 1 127 129 3 127 129 1 127 130 1 126 130 2 126 131 2 127 130 3 127 131 1 128 131 1 128 130 3 129 131 1 130 131 1 130 130 3 131 131 1 132 130 3 132 131 1 133 131 1 134 131 1 134 130 3 135 131 1 136 130 3 136 131 1 137 131 1 138 130 3 138 131 1 139 131 1 140 131 1 140 130 3 141 131 1 142 130 3 142 131 1 143 131 1 144 130 3 144 131 1 145 130 3 145 131 1 146 131 1 147 130 3 147 131 1 148 131 2 148 132 2 147 131 2 146 131 2 146 130 3 146 132 2 145 131 2 145 131 2 146 132 2 145 131 2 146 132 2 145 131 2 146 132 2 145 131 2 146 132 2 145 131 2 145 130 3 144 131 2 144 132 2 145 132 2 144 131 2 143 131 2 143 132 2 143 131 2 143 130 3 142 131 2 142 132 2 142 131 3 142 131 1 141 132 2 142 131 2 141 131 2 141 132 2 141 131 1 140 132 2 141 131 2 140 131 2 140 132 2 140 131 3 140 131 1 139 132 2 140 131 2 139 132 2 139 131 3 139 131 3 138 131 3 137 131 3 136 132 1 135 131 3 135 132 1 134 132 1 133 131 3 133 132 1 132 132 1 131 131 3 131 132 1 130 132 1 129 132 1 128 132 1 127 131 3 127 132 1 127 132 3 127 133 2 128 133 2 126 133 2 126 132 2 127 133 2 128 133 2 129 132 2 128 133 2 129 132 2 128 133 2 129 132 2 128 133 2 129 132 2 128 133 2 129 132 2 129 132 2 128 133 2 129 132 2 128 133 2 129 132 2 129 132 3 129 132 1 129 133 2 130 133 2 130 132 2 130 133 2 129 133 2 130 133 2 129 133 2 130 133 2 129 133 2 130 133 2 129 132 2 130 132 2 129 131 3 131 132 2 131 131 2 131 132 2 131 131 3 131 131 1 132 132 2 133 132 2 133 131 3 134 132 2 134 131 2 134 132 2 134 131 1 135 132 2 135 131 3 135 132 1 135 133 2 136 133 2 135 133 2 136 132 3 136 133 2 137 133 2 136 133 2 137 133 2 136 133 2 137 133 2 136 133 2 137 133 2 137 132 2 137 132 3 137 132 1 138 132 1 138 132 2 138 133 2 137 132 3 139 133 2 138 132 2 139 133 2 138 133 2 139 133 2 138 133 2 138 133 2 137 133 2 138 133 2 137 133 2 138 133 2 137 133 2 138 133 2 137 133 2 137 132 3 137 132 1 136 132 2 137 132 2 136 132 2 136 133 2 136 132 3 136 132 1 135 132 3 135 133 2 134 132 2 135 133 2 136 132 3 136 131 3 135 129 3 135 128 3 132 128 3 130 128 3 129 127 4 130 127 2 129 128 2 129 129 2 129 127 2 131 128 3 133 129 3 135 129 3 137 129 3 139 129 3 141 129 3 143 129 3 145 129 3 147 129 3 149 129 3 149 130 3 149 130 3 151 130 2 152 130 2 151 130 3 151 130 1 151 130 2 150 131 1 151 131 1 149 131 1 148 131 1 147 131 3 147 131 1 146 131 1 145 131 3 145 131 1 144 131 1 143 131 3 143 131 1 141 131 3 140 132 2 141 132 2 141 131 3 143 130 3 145 130 3 147 130 3 149 130 3 148 130 3 149 131 3 152 131 2 150 132 2 151 132 2 151 131 2 149 132 2 151 132 2 149 131 3 148 131 3 147 132 2 148 132 2 149 131 2 149 132 2 149 131 2 149 132 2 149 131 2 149 132 2 149 131 2 149 132 2 148 132 3 148 132 1 149 132 2 147 131 2 149 132 2 148 132 2 147 132 2 147 131 3 147 131 1 146 131 3 146 132 2 147 132 2 147 132 2 146 132 2 147 132 2 146 132 2 147 132 2 146 132 2 147 132 2 146 132 2 145 132 2 145 131 3 144 132 2 145 132 2 144 132 2 145 132 2 144 132 2 145 132 2 144 132 2 145 132 2 144 132 2 144 131 3 144 132 2 143 132 2 144 132 2 143 132 2 144 132 2 143 132 2 144 132 2 143 132 2 144 132 2 143 131 3 143 132 2 142 132 2 142 133 2 143 133 2 142 131 3 142 133 2 142 132 2 142 133 2 142 132 2 142 133 2 142 132 2 142 133 2 142 132 2 142 133 2 142 132 2 142 133 2 142 132 2 142 133 2 142 132 3 142 132 1 142 133 2 141 132 2 142 133 2 141 133 2 142 132 2 141 133 2 141 132 2 141 132 3 141 132 1 141 133 2 140 133 2 141 133 2 140 132 3 140 132 1 139 132 3 139 132 1 139 133 2 138 132 3 137 132 3 138 133 2 138 133 2 137 133 2 138 133 2 137 133 2 138 133 2 137 133 2 138 133 2 137 133 2 138 133 2 137 132 3 137 133 2 136 133 2 136 132 3 136 134 2 136 133 1 135 133 3 135 133 1 135 134 2 136 135 2 135 134 2 134 134 2 135 134 2 134 133 3 134 133 1 133 134 2 134 133 2 133 133 2 133 134 2 134 132 1 134 133 2 133 134 2 134 133 1 133 133 3 133 133 1 133 133 2 133 134 2 132 133 1 132 134 2 133 133 2 132 133 2 133 133 1 132 134 2 132 133 3 132 133 1 131 133 1 131 134 2 132 133 2 131 133 2 132 133 1 131 134 2 131 133 1 130 134 2 131 133 2 130 134 2 130 133 3 130 133 1 129 133 3 129 133 1 129 134 2 129 133 2 128 134 2 128 135 2 128 134 2 128 133 3 128 133 1 127 134 2 127 135 2 127 134 2 127 133 3 127 133 1 126 133 2 126 134 2 126 133 2 126 134 2 126 133 2 126 134 2 126 133 2 126 134 2 126 133 2 127 132 3 126 132 3 126 132 1 125 132 2 125 133 2 125 132 2 126 132 2 127 131 3 127 130 3 125 130 2 125 129 2 125 130 2 126 130 3 126 130 1 126 129 1 125 129 2 125 130 2 125 129 2 125 130 2 125 129 2 125 130 2 125 129 2 125 130 2 125 129 2 125 130 2 125 129 2 125 130 2 125 129 2 125 130 2 125 129 2 126 130 3 127 128 2 126 129 2 126 129 2 128 128 2 128 129 3 129 128 2 129 129 1 130 129 3 130 128 2 129 128 2 130 128 3 130 128 1 131 127 2 130 128 2 131 127 2 132 127 2 131 128 2 131 128 1 132 127 2 132 128 3 132 128 3 133 128 3 133 127 2 134 127 2 133 127 2 134 128 3 135 128 3 136 126 2 135 126 2 136 127 3 137 126 2 137 125 2 137 126 2 137 127 3 137 127 3 138 127 3 138 126 2 137 126 2 139 126 2 138 126 2 140 125 2 139 125 2 140 126 2 140 127 3 141 126 2 141 125 2 141 126 2 141 126 3 141 126 1 141 125 2 141 126 2 142 126 2 142 125 2 142 126 1 143 125 2 142 126 2 143 126 2 143 125 2 143 126 3 143 126 1 143 126 2 144 125 2 145 125 2 144 126 2 144 126 1 145 125 2 145 126 3 146 125 2 147 126 2 146 125 2 146 125 2 146 127 3 147 127 1 148 126 2 148 127 3 149 126 2 149 126 2 149 127 3 150 126 2 150 125 2 150 127 3 151 126 2 151 127 2 151 126 2 150 128 3 150 129 3 151 129 3 151 129 1 152 129 2 151 129 2 151 129 2 151 129 2 151 130 2 151 129 3 152 130 2 151 130 1 151 131 3 151 131 1 150 132 2 152 131 2 152 131 2 150 132 2 152 131 2 150 132 2 152 131 2 150 132 2 152 131 2 150 132 2 152 131 2 150 131 3 149 132 2 149 131 3 149 131 1 148 131 3 147 132 2 149 132 2 147 132 2 149 132 2 147 132 2 149 132 2 149 132 2 147 132 2 149 132 2 147 132 2 149 132 2 147 132 2 147 131 2 147 132 2 147 131 3 147 131 1 146 132 2 146 131 3 145 132 2 145 131 3 144 132 2 143 132 2 143 131 3 142 132 2 141 132 2 141 131 3 141 132 1 141 133 2 140 133 2 141 132 3 139 133 2 140 133 2 139 133 2 140 133 2 139 133 2 140 133 2 139 133 2 140 133 2 139 133 2 140 133 2 139 133 2 140 133 2 139 133 2 140 133 2 139 133 2 139 132 3 138 132 3 138 133 1 137 133 2 139 133 2 137 133 2 139 133 2 137 133 2 139 133 2 138 134 2 139 133 2 139 133 2 137 133 2 139 133 2 137 133 2 139 133 2 137 133 2 139 133 2 137 133 2 139 133 2 138 132 3 137 132 3 137 134 2 136 133 2 137 134 2 136 133 3 136 133 1 136 134 2 137 134 2 136 134 2 137 134 2 137 134 2 136 134 2 137 134 2 136 134 2 137 134 2 136 134 2 137 134 2 136 134 2 137 134 2 136 132 3 136 134 2 135 133 3 134 133 2 136 134 2 135 134 2 136 134 2 135 134 2 136 134 2 135 134 2 136 134 2 134 134 2 135 134 2 134 134 2 135 134 2 134 134 2 135 134 2 134 134 2 134 133 3 134 133 1 133 134 2 133 134 2 134 134 2 133 134 2 134 134 2 133 134 2 134 134 2 133 134 2 134 134 2 133 134 2 133 133 3 132 134 2 133 134 2 132 134 2 133 134 2 132 134 2 133 134 2 132 134 2 133 134 2 132 134 2 132 133 3 131 134 2 130 134 2 130 133 3 129 134 2 129 133 3 128 134 2 128 133 3 127 134 2 126 134 2 127 134 2 127 134 3 127 134 1 126 134 2 127 135 2 126 134 2 127 135 2 126 134 2 127 135 2 126 134 2 127 135 2 127 135 2 126 134 2 127 135 2 126 134 2 127 135 2 126 134 2 127 135 2 126 133 2 126 132 2 127 132 3 127 131 3 126 130 2 127 130 3 125 130 2 126 130 2 125 130 2 126 130 2 125 130 2 126 130 2 125 130 2 126 130 2 125 130 2 126 130 2 125 130 2 126 129 2 125 130 2 126 130 3 126 130 1 126 129 2 125 130 2 126 129 2 125 130 2 126 129 2 125 130 2 126 129 2 125 130 2 127 129 2 126 129 2 128 129 2 128 130 3 128 128 2 128 129 3 128 129 1 129 129 2 128 128 2 129 129 1 129 128 2 128 128 2 129 128 2 128 128 2 129 128 2 128 128 2 129 129 2 128 128 2 129 128 2 130 129 3 130 128 2 129 128 2 131 128 2 131 129 3 131 127 2 131 128 3";
            this.setState({
                mapImages: [{
                    source: require('../../Resources/robot/charge.png'),
                    position: { x: 125, y: 125 },
                    size: { w: 29, h: 39 },
                    rotation: 0,
                    name: 'charge'
                }, {
                    source: require('../../Resources/robot/robot.png'),
                    bgSource: require('../../Resources/robot/robot_working.png'),
                    position: { x: 135, y: 135 },
                    size: { w: 29, h: 29 },
                    name: 'robot'
                }]
            })
            this.updateMapData(pointsStr, true, 'robot', true);
        }, 1000)
    }

    render() {
        return (
            <View style={{ flex: 1 }}>
                <RobotMapView
                    style={{ width: width, height: width, backgroundColor: '#f5f5f5' }}
                    mapStyle={{ wallColor: '#75c4fa', floorColor: '#468ad6', lineColor: '#9bc4e3' }}
                    imageSources={this.state.mapImages}
                    ref='mapView'
                />
                <TouchableHighlight onPress={this._beginSweep.bind(this)}>
                    <Text style={{
                        fontSize: 12,
                        padding: 15,
                        alignSelf: 'center',
                        borderColor: '#cccccc',
                        borderWidth: 0.5,
                        color: '#666666'
                    }}>清扫</Text>
                </TouchableHighlight>
                <TouchableHighlight onPress={this._stopSweep.bind(this)} style={{ marginTop: 20 }}>
                    <Text style={{
                        fontSize: 12,
                        padding: 15,
                        alignSelf: 'center',
                        borderColor: '#cccccc',
                        borderWidth: 0.5,
                        color: '#666666'
                    }}>暂停</Text>
                </TouchableHighlight>
                <TouchableHighlight onPress={this._backCharge.bind(this)} style={{ marginTop: 20 }}>
                    <Text style={{
                        fontSize: 12,
                        padding: 15,
                        alignSelf: 'center',
                        borderColor: '#cccccc',
                        borderWidth: 0.5,
                        color: '#666666'
                    }}>回充</Text>
                </TouchableHighlight>
                <TouchableHighlight onPress={this._cleanMapView.bind(this)} style={{ marginTop: 20 }}>
                    <Text style={{
                        fontSize: 12,
                        padding: 15,
                        alignSelf: 'center',
                        borderColor: '#cccccc',
                        borderWidth: 0.5,
                        color: '#666666'
                    }}>清除地图</Text>
                </TouchableHighlight>
            </View>
        )
    }

    _beginSweep() {
        console.log('000000');
        console.log(this.state.mapImages);
        //rpc
        setTimeout(() => {
            let pointsStr = "128 128 2 125 127 2 125 110 3";
            this.updateMapData(pointsStr, true, 'robot', false);
            this.setState({
                mapImages: [{
                    source: require('../../Resources/robot/charge.png'),
                    position: { x: 125, y: 125 },
                    size: { w: 29, h: 39 },
                    name: 'charge'
                }, {
                    source: require('../../Resources/robot/robot.png'),
                    bgSource: require('../../Resources/robot/robot_working.png'),
                    name: 'robot',
                    size: { w: 29, h: 29 },
                }]
            })
        }, 2000)
    }

    _stopSweep() {
        console.log('000000');
        console.log(this.state.mapImages);
        this.refs.mapView.positionForImage('robot').then((position) => {
            console.log(position);
            this.setState({
                mapImages: [{
                    source: require('../../Resources/robot/charge.png'),
                    position: { x: 125, y: 125 },
                    size: { w: 29, h: 39 },
                    rotation: 0,
                    name: 'charge'
                }, {
                    source: require('../../Resources/robot/robot.png'),
                    size: { w: 29, h: 29 },
                    name: 'robot'
                }]
            })
        })

    }

    _backCharge() {
        //rpc,收到回到充电座的订阅后
        this.refs.mapView.positionForImage('robot').then((position) => {
            let sleepLoc = { x: position.x + 15, y: position.y - 15 };
            this.setState({
                mapImages: [{
                    source: require('../../Resources/robot/charge.png'),
                    name: 'charge',
                    size: { w: 20, h: 30 },
                }, {
                    source: require('../../Resources/robot/robot.png'),
                    name: 'robot',
                    size: { w: 20, h: 20 },
                }, {
                    source: require('../../Resources/robot/sleep.png'),
                    size: { w: 20, h: 20 },
                    position: sleepLoc,
                    name: 'sleep'
                }]
            })
        })

    }

    _cleanMapView() {
        this.refs.mapView.cleanMapView();
    }


    updateMapData(pointsStr, autoCenter, robotImage, scaleToFit) {
        this.refs.mapView.updateData(pointsStr, autoCenter, robotImage, scaleToFit);
    }

    // updateMutiValue(data) {
    //     console.log(data);
    //     this.setState({ mutiValue: data.newValue.join("-") });
    // }
}
